<div class="page-width cart-recommendations">
  {% if recommendations.performed and recommendations.products_count > 0 %}
    <ul class="grid grid--2-col grid--4-col-desktop product-grid" role="list">
      {% for product in recommendations.products %}
        {% liquid
          assign redirect_url = product.url
          if product.metafields.custom.page_url != blank
            assign redirect_url =  product.metafields.custom.page_url
          endif
        %}
        <li class="grid__item" id="{{ product.id }}">
          <div class="recommendation-item">
            {%- liquid
              assign featured_media_aspect_ratio = product.featured_media.aspect_ratio
              if product.featured_media.aspect_ratio == nil
                assign featured_media_aspect_ratio = 1
              endif
            -%}
            <div class="recommendation-item__media">
              <div class=" media media--transparent media--hover-effect"
                style="padding-bottom: {{ 1 | divided_by: featured_media_aspect_ratio | times: 100 }}%;"
              >
                <a href="{{ redirect_url }}" class="media__link">
              
                  <img
                    srcset="{%- if product.featured_media.width >= 148 -%}{{ product.featured_media | img_url: '148x' }} 148w,{%- endif -%}
                    {%- if product.featured_media.width >= 167 -%}{{ product.featured_media | img_url: '167x' }} 167w,{%- endif -%}
                    {%- if product.featured_media.width >= 360 -%}{{ product.featured_media | img_url: '360x' }} 360w,{%- endif -%}
                    {%- if product.featured_media.width >= 375 -%}{{ product.featured_media | img_url: '375x' }} 375w,{%- endif -%}
                      {%- if product.featured_media.width >= 533 -%}{{ product.featured_media | img_url: '533x' }} 533w,{%- endif -%}
                      {%- if product.featured_media.width >= 720 -%}{{ product.featured_media | img_url: '720x' }} 720w,{%- endif -%}
                      {%- if product.featured_media.width >= 940 -%}{{ product.featured_media | img_url: '940x' }} 940w,{%- endif -%}
                      {%- if product.featured_media.width >= 1066 -%}{{ product.featured_media | img_url: '1066x' }} 1066w,{%- endif -%}
                      {{ product.featured_media | img_url: 'master' }} {{ product.featured_media.width }}w"
                    src="{{ product.featured_media | img_url: '533x' }}"
                    sizes="(min-width: {{ settings.page_width }}px) {{ settings.page_width | minus: 130 | divided_by: 4 }}px, (min-width: 990px) calc((100vw - 130px) / 4), (min-width: 750px) calc((100vw - 120px) / 3), calc((100vw - 35px) / 2)"
                    alt="{{ product.featured_media.alt | escape }}"
                    loading="lazy"
                    class="recommendation-item__media-image"
                    width="{{ product.featured_media.width }}"
                    height="{{ product.featured_media.height }}"
                  >
                </a>
              </div>
            </div>
            <div class="recommendation-item__content">
              <div class="recommendation-item__content-title">
                <a href="{{ redirect_url }}" class="product_title_link">
                  {{ product.title | escape }}
                </a>
                <span class="price">
                  {{ product.price | money }}
                </span>
              </div>
              <div class="recommendation-item__content-operate">
                <a href="{{ redirect_url }}" class="recommendation_product_link">
                  {{ settings.recommendation_button_label }}
                  <svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" viewBox="0 0 10 10" fill="none">
                    <path d="M3 2L6.5 5.5M3 9L5.33333 6.9" stroke="#2F80ED" stroke-width="0.933333" stroke-linecap="round" stroke-linejoin="round"/>
                  </svg>
                </a>
              </div>
            </div>
          </div>
        </li>
      {% endfor %}
    </ul>
  {% endif %}
</div>
{%  schema  %}
{
  "name": "Recommendation Item",
  "tag": "section",
  "class": "recommendation-item",
  "presets": [
    {
      "name": "Recommendation Item"
    }
  ]
}
{% endschema %}